"use client";

import { useEffect, useState } from 'react';

interface FlipClockProps {
  value: number;
  isHour?: boolean;
}

export default function FlipClock({ value, isHour = false }: FlipClockProps) {
  const [currentValue, setCurrentValue] = useState(value);
  const [isFlipping, setIsFlipping] = useState(false);

  useEffect(() => {
    if (value !== currentValue) {
      setIsFlipping(true);
      setCurrentValue(value);
      setTimeout(() => setIsFlipping(false), 500);
    }
  }, [value]);

  return (
    <div className="flipper">
      <div className="top">{String(currentValue).padStart(isHour ? 2 : 1, '0')}</div>
      <div className="bottom">{String(currentValue).padStart(isHour ? 2 : 1, '0')}</div>
      <div className={isFlipping ? 'top-flip flip-out' : 'top-flip'}>
        {String(currentValue).padStart(isHour ? 2 : 1, '0')}
      </div>
      <div className={isFlipping ? 'bottom-flip flip-in' : 'bottom-flip'}>
        {String(currentValue).padStart(isHour ? 2 : 1, '0')}
      </div>
    </div>
  );
}
